<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3缩放切换效果焦点图特效 - 站长素材</title>
	<script src="jquery.min.js"></script>
	<script src="js/prefixfree.min.js"></script>

	<style type="text/css">
html, body{background-color:#333;}

.slides{
    padding:0;
    width:100%;
    height:500px;
    display:block;
    margin:0 auto;
    position:relative;
}

.slides *{
    user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.slides input{display:none;}

.slide-container{
	display:block;
}

.slide{
    top:0;
    opacity:0;
    width:100%;
    display:block;
    position:absolute;
    background-color:green;
    transform:scale(0);

    transition:all .7s ease-in-out;
}

.slide img{
    width:100%;
}
.nav {
	
}
.nav label{
    width:33%;
    height:100%;
    display:none;
    position:absolute;

	  opacity:0;
    z-index:9;
    cursor:pointer;

    transition:opacity .2s;

    color:#FFF;
    font-size:156pt;
    text-align:center;
    line-height:380px;
    font-family:"Varela Round", sans-serif;
    background-color:rgba(255, 255, 255, .3);
    text-shadow:0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label{opacity:0.5;}

.nav label:hover{opacity:1;}

.nav .next{
	right:0;
}

input:checked + .slide-container  .slide{
    opacity:1;

    transform:scale(1);

    transition:opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label{display:block;}

.nav-dots{
	width:100%;
	bottom:9px;
	height:11px;
	display:block;
	position:absolute;
	text-align:center;
}

.nav-dots .nav-dot{
	top:-5px;
	width:11px;
	height:11px;
	margin:0 4px;
	position:relative;
	border-radius:100%;
	display:inline-block;
	background-color:rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover{
	cursor:pointer;
	background-color:rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6
input#img-7:checked ~ .nav-dots label#img-dot-7
input#img-8:checked ~ .nav-dots label#img-dot-8{
	background:rgba(0, 0, 0, 0.8);
}

#page {
	width :60%;
}
.nav a{

}
#message {color:white;}
</style>
<script>
function updateHeight(){
	//alert(document.getElementsByClassName("haha").offsetHeight);$
	//var height  = $("#message").height;
	var h = $(".slide").height();
	//$(".slide").css("height",h+100);
	$("#message").html(h);
}
</script>

</head>

<body>
	<h1 id="message">hahahha</h1>
	<div class="haha"></div>
<div id="page">
<ul class="slides">
	<input type="radio" name="radio-btn" id="img-1" checked />
	<li class="slide-container">
		<div class="slide">
			<img src="images/1.png" />
		</div>
		<div class="nav">
			<label for="img-4" class="prev" onclick="updateHeight()"></label>
			<label for="img-2" class="next" onclick="updateHeight()"></label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-2" />
	<li class="slide-container">
		<div class="slide">
		  <img src="images/3.png" />
		</div>
		<div class="nav">
			<label for="img-1" class="prev" onclick="updateHeight()"></label>
			<label for="img-3" class="next" onclick="updateHeight()"></label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-3" />
	<li class="slide-container">
		<div class="slide">
		  <img src="images/2.png" />
		</div>
		<div class="nav">
			<label for="img-2" class="prev" onclick="updateHeight()"></label>
			<label for="img-4" class="next" onclick="updateHeight()"></label>
		</div>
	</li>

	<input type="radio" name="radio-btn" id="img-4" />
	<li class="slide-container">
		<div class="slide">
		  <img src="images/4.png" />
		</div>
		<div class="nav">
			<label for="img-3" class="prev" onclick="updateHeight()"></label>
			<label for="img-1" class="next" onclick="updateHeight()"></label>
		</div>
	</li>


	<li class="nav-dots">
		<label for="img-1" class="nav-dot" id="img-dot-1"></label>
		<label for="img-2" class="nav-dot" id="img-dot-2"></label>
		<label for="img-3" class="nav-dot" id="img-dot-3"></label>
		<label for="img-4" class="nav-dot" id="img-dot-4"></label>
	</li>
	
</ul>

</div>
</body>
</html>